var gulp = require('gulp');

var sass = require('gulp-sass');
var prefixer = require('gulp-autoprefixer');
var minifyCss = require('gulp-minify-css');

var sourcemaps = require('gulp-sourcemaps');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglifyjs');

// 在命令执行 gulp sass
// 编译 sass 文件
// sass sourcemap 用于开发时方便在 chrome 浏览器里修改 sass, 需要配置 workspace
// 参考: https://robots.thoughtbot.com/sass-source-maps-chrome-magic
gulp.task('sass', function() {
	gulp.src('./app/assets/stylesheets/*.scss') // 拿到 sass 文件
		.pipe(sourcemaps.init())                // 准备生成 sourcemap
		.pipe(sass({outputStyle:'compressed'})) // 编译 sass 文件, 顺便压缩一下
		.pipe(prefixer({
			browsers: ['last 2 versions']       // 自动加上前缀, 兼容各浏览器最新的两个版本就好
		}))

		.pipe(minifyCss())                      // 压缩 css 代码, 如 0.5 压缩成 .5
		.pipe(sourcemaps.write('maps', {        // 写入 sourcemap
			sourceRoot: './app/assets/stylesheets/'
		}))
		.pipe(gulp.dest('./public/css'));       // 输出到 public/css 目录
});

// 在命令执行 gulp coffee
// 编译 coffeescript 文件
gulp.task('coffee', function() {
	gulp.src('./app/assets/coffeescripts/*.coffee') // 拿到 coffeescript 文件
		.pipe(coffee())                             // 编译 coffeescript 文件
		.pipe(sourcemaps.init())                    // 准备生成 sourcemap
		.pipe(uglify())                             // 压缩混淆
		.pipe(sourcemaps.write('maps'))             // 写入 sourcemap
		.pipe(gulp.dest('./public/js'));            // 输出到 public/js 目录
});


// 这样, 在命令行就可以执行 gulp watch
// coffeescript, sass 文件更新时, 会自动编译
// 按快捷键 Ctrl-C 停止
gulp.task('watch', function() {

	// 监控 coffeescript 文件更新
	gulp.watch([
		'./app/assets/stylesheets/*.scss'
	], [
		'sass'
	]);

	// 监控 sass 文件更新
	gulp.watch([
		'./app/assets/coffeescripts/*.coffee'
	], [
		'coffee'
	]);

	// 分成两个监控, 如果 coffeescript 与 sass 文件一起监控的话,
	// 我一更新 coffeescript, 那 sass 文件也要编译一遍, 多浪费时间浪费感情, 多伤硬盘的, :)
});


